<template>
<!-- 管理修图师 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="content">
      <ul class="list">
        <li class="list-item">
          <div class="view-left">
            <span class="text">开启修图模式</span>
          </div>
          <div class="view-right">
            <div class="mui-switch mui-switch-mini mui-active">
              <div class="mui-switch-handle"></div>
            </div>
          </div>
        </li>
        <li class="list-item">
          <div class="view-left">
            <span class="text">上传邀请码</span>
          </div>
          <div class="view-right">
            <span class="code">123456</span>
            <span class="copy" data-clipboard-text="我是复制的内容" @click="copy">复制</span>
          </div>
        </li>
        <p class="tip">• 将上传邀请码复制发送给其他人，授予上传权限</p>
        <p class="tip">• 开启后，拍摄的照片将不直接显示在直播相册中，而显示至后台修图工作界面，修图师可以实时修图，并选择到直播相册中</p>
        <p class="tip">• 修图师需从PC端登录个人帐号，在“图库云”中点击相册封面的“修图”开始云端修图工作</p>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

import Clipboard from 'clipboard'

import VHeader from 'components/v-header'

export default {
  data() {
    return {
      title: '管理修图师'
    }
  },
  components: {
    VHeader
  },
  methods: {
    copy: function () {
       let clipboard = new Clipboard('.copy')
        clipboard.on('success', e => {
          mui.toast('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          mui.toast('当前设备不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })

    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  .content
    margin-top 15px
    .list
      .list-item
        display flex
        justify-content space-between
        height 50px
        line-height 50px
        padding 0 20px
        background-color #fff
        border 1px solid $color-bg-gray
        .text
          font-size $font-size-small
          color #333
        .code
          font-size $font-size-small-s
        .copy
          padding 8px 10px
          border 1px solid $color-theme
          border-radius 2px
          font-size $font-size-small-s
          color $color-theme
        .mui-active
          background-color $color-theme
          border-color $color-theme
          margin-top 50%
          transform translateY(-50%)
      .tip
        padding 0 20px
        margin-top 15px
        font-size $font-size-mini 
        color #a8acb3
        line-height 16px

</style>
